<script setup>
const props = defineProps({
  text: {
    type: String,
    required: true,
  },
  layout: {
    type: String,
    default: 'horizontal', // 默认布局为水平（左右排列）
    validator: (value) => ['horizontal', 'vertical'].includes(value), // 只允许 horizontal 或 vertical
  },
});
</script>

<template>
  <div class="label-container" :class="layout">
    <label class="label-text">{{ text }}</label>
    <div class="input-slot">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.label-container {
  display: flex;
  margin-bottom: 15px; /* 标签和输入框之间的间距 */
}

/* 水平布局（默认） */
.label-container.horizontal {
  align-items: center; /* 垂直居中对齐 */
}

.label-container.horizontal .label-text {
  flex: 0 0 80px; /* 标签宽度固定 */
  font-weight: bold;
  color: #333; /* 标签文字颜色 */
}

.label-container.horizontal .input-slot {
  flex: 1; /* 输入框占据剩余空间 */
  display: flex;
  align-items: center; /* 确保输入框内容垂直居中 */
}

/* 垂直布局 */
.label-container.vertical {
  flex-direction: column; /* 上下排列 */
  align-items: flex-start; /* 左对齐 */
}

.label-container.vertical .label-text {
  margin-bottom: 8px; /* 标签和输入框之间的间距 */
  font-weight: bold;
  color: #333; /* 标签文字颜色 */
}

.label-container.vertical .input-slot {
  width: 100%; /* 输入框占据全部宽度 */
}
</style>